<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :md="6" :sm="8">
            <a-form-item label="机构名称">
              <j-select-depart
                v-model="queryParam.officeId"
                :trigger-change="true"
                customReturnField="id"
                :multi="false"
              ></j-select-depart>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item label="时间">
              <a-date-picker
                mode="year"
                placeholder="请选择年份"
                format="YYYY"
                value-format="yyyy-MM-dd"
                v-model="queryParam.planYear"
                :open="yearPickShow"
                style="width: 100%"
                @panelChange="handlePanelChange"
                @openChange="handleOpenChange"
              />
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- table区域-begin -->
    <div>
      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination1"
        :loading="loading"
      >
        <span slot="bsjdwName" slot-scope="text">
          <j-ellipsis :value="text" :length="20" />
        </span>
      </a-table>
    </div>
    <!-- table区域-end -->
    <a-row :gutter="24">
      <a-col v-for="(item, index) in stage" :key="index" :md="4" :sm="8">
        <ProjectStage :stage="item" ref="stage"></ProjectStage>
      </a-col>
    </a-row>
  </a-card>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import ProjectStage from './projectStage'
import columns from './indexColumns'
import moment from 'moment'
import 'moment/locale/zh-cn'
import store from '@/store/'
import { httpAction, getAction } from '@/api/manage'
import { currentY } from '@/mixins/commontime'

export default {
  name: 'basicTable',
  mixins: [JeecgListMixin],
  components: {
    ProjectStage,
  },
  data() {
    return {
      queryParam: {
        planYear: currentY(),
      },
      superParam: {
        companyId: store.getters.departInfo.id,
      },
      // 表头
      ipagination1: {
        current: 1,
        pageSize: 11,
        showSizeChanger: false,
        onChange: (pageNumber) => {
          this.onChange1(pageNumber)
        },
        total: 0,
      },
      columns: columns(this),
      url: {
        list: '/sjzyzhgl/sjPlanInfo/planStageNum',
        bottom: '/sjzyzhgl/sjPlanInfo/planStageData',
      },
      yearPickShow: false,
      stage: [
        {
          color: '#5E7AF0',
          img: 'stage1',
          title: '3105',
          text: '审计项目总数',
        },
        {
          color: '#8693F3',
          img: 'stage2',
          title: '3105',
          text: '审计准备阶段',
        },
        {
          color: '#BC8CEF',
          img: 'stage3',
          title: '3105',
          text: '审计实施阶段',
        },
        {
          color: '#FFA897',
          img: 'stage4',
          title: '3105',
          text: '审计报告阶段',
        },
        {
          color: '#6DD5DE',
          img: 'stage6',
          title: '3105',
          text: '审计归档阶段',
        },
        {
          color: '#8AC3F8',
          img: 'stage5',
          title: '3105',
          text: '审计整改阶段',
        },
      ],
      disableMixinCreated: false,
    }
  },
  created() {
    this.getBottomData()
    this.list1()
  },
  computed: {},
  methods: {
    searchQuery() {
      this.list1(1)
      this.getBottomData()
    },
    onChange1(pageNumber) {
      this.ipagination1.current = pageNumber
      this.list1()
    },
    list1(arg) {
      this.loading = true
      if (arg === 1) this.ipagination1.current = 1
      var param = Object.assign(
        {
          pageNo: this.ipagination1.current,
          pageSize: this.ipagination1.pageSize,
        },
        this.queryParam,
        this.superParam
      )
      getAction(this.url.list, param).then((res) => {
        this.loading = false
        if (res.success && res.result) {
          this.dataSource = res.result.records
          this.ipagination1.total = res.result.total
        } else {
          this.ipagination1.total = 0
        }
      })
    },
    getBottomData() {
      var param = Object.assign({}, this.queryParam, this.superParam)
      getAction(this.url.bottom, { ...param })
        .then((res) => {
          if (res.success) {
            console.log(222, res)
            this.stage[0].title = res.result[0].projectTotalCount
            this.stage[1].title = res.result[0].readyStage
            this.stage[2].title = res.result[0].carryOutStage
            this.stage[3].title = res.result[0].reportStage
            this.stage[4].title = res.result[0].reformStage
            this.stage[5].title = res.result[0].archiveStage
          } else {
            console.log(res)
          }
        })
        .finally(() => {})
    },
    // 弹出日历和关闭日历的回调
    handleOpenChange(status) {
      this.yearPickShow = status
      if(this.queryParam.planYear){
        this.queryParam.planYear = moment(this.queryParam.planYear.slice(0, 4)).format('YYYY')
      }
    },
    moment,
    // 得到年份选择器的值
    handlePanelChange(value) {
      this.yearPickShow = false
      this.queryParam.planYear = moment(value).format('YYYY')
    },
    updateProList() {
      this.list1()
    },
  },
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>